<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { findHotGoodsAPI } from '@/apis/detail.js'

// 设计props接收不同参数，适配不同的title和数据
const props = defineProps({
  hotType: {
    type: Number,
  }
})

// 适配title 1 - 24小时热榜 2-周热榜
const TYPEMAP = {
  1: '24小时热榜',
  2: '周热榜'
}
const title = computed(() => TYPEMAP[props.hotType])

// 获取产品详情数据
const hotList = ref({})
const route = useRoute() // useRoute 获取路由参数
// 定义请求函数
const getHotList = async () => {
  const res = await findHotGoodsAPI({
    id: route.params.id,
    type: props.hotType
  })
  hotList.value = res.result
  // console.log('热销榜单',res)
}
// 生命周期函数
onMounted(() => getHotList())
</script>

<template>
  <div class="goods-hot">
    <h3>{{title}}</h3>
    <RouterLink class="goods-item" v-for="goods in hotList" :key="goods.id" :to="`/detail/${goods.id}`">
      <div class="pic"><img v-img-lazy="goods.picture" /></div>
      <div class="info-desc">
        <p class="name ellipsis-2">{{goods.name}}</p>
        <p class="desc ellipsis">{{goods.desc}}</p>
        <p class="price">{{goods.price}}</p>
      </div>
    </RouterLink>
  </div>
</template>

<style lang="scss" scoped>
.ellipsis,.ellipsis-2{
  text-overflow: ellipsis;
  overflow: hidden;
}
.ellipsis-2{
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.goods-hot{
  h3{
    height: 70px;
    line-height: 70px;
    background-color: $helpColor;
    font-size: 18px;
    color: #fff;
    padding-left: 25px;
    margin-bottom: 10px;
    font-weight: 400;
  }
  .goods-item{
    display: block;
    position: relative;
    overflow: hidden;
    border: 1px solid #ededed;
    background-color: #fff;
    transition: all .5s;
    margin-bottom: 15px;
    .pic{
      width: 100%;
      height: 278px;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .info-desc{
      padding: 15px;
    }
    p{
      font-size: 14px;
    }
    p.name{
      height: 40px;
    }
    p.desc{
      font-size: 12px;
      color: #999;
      height: 17px;
      margin-top: 5px;
    }
    p.price{
      margin-top: 10px;
      font-size: 20px;
      color: $priceColor;
    }
    &:hover{
      border-color: $xtxColor;
    }
  }
}
</style>
